<template>
    <div class="bgfff pl15 pt15 pr15 pb15 card5">
        <div class="posre h426 overhidden boxshadow">
            <img src="https://you-one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/card5_bg.png" alt=""
                 class="posab left0 top0  w100p h426 imgborder">

          <div class="align-cen fs10 ce8 card_company disflex">
            <div class="card_line_2"></div>
            <span class="pr14">{{card_msg.company || '公司名称'}}</span>
          </div>

          <div class="cacrd5_header" >
            <img :src="card_msg.picchecked || userlogo" alt=""
                 class="imgheader">
          </div>

          <div class="cacrd3_right" >
            <p class="fs20 fbold">{{card_msg.username || '姓名'}}</p>
            <p class="fs12 lh20 ">{{card_msg.post || '职位'}}</p>
          </div>

          <div class="cacrd3_telemail " >
              <p class="fs12  pb6">{{card_msg.tel || '电话'}}</p>
              <p class="fs12 ">{{card_msg.email || '邮箱'}}</p>
          </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "card_5",
        props:['card_msg','type'],
        data(){
          return {
            userlogo: 'https://you-one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/user_default_avatar_square.png', //头像
            cardMsg : {}
          }
        },created() {
        }
    }
</script>

<style>
    div{
        color: #E9DABF;
    }
    .boxshadow{
      background:rgba(255,255,255,1);
      box-shadow:0px 0px 10px 0px rgba(6, 1, 0, 0.35);
      border-radius:10px;
    }

    .imgborder{
      border-radius:10px;
    }

    .card_line_2 {
      position: relative;
      color: #E9DABF;
      margin-right: 4upx;
    }

    .card_line_2::before,.card_line_2::after {
        position: absolute;
        width: 4upx;
        height: 18upx;
        background: #E9DABF;
        top: 0;
        bottom: 0;
        margin: auto;
        font-size: 12px;
        content: '';
    }

    .card_line_2::before {
        right: 0;
    }

    .card_line_2::after {
        right: 10upx;
    }

    .card_company {
      position: relative;
      top: 60upx;
      left: 49upx;
      font-size: 12px;
      letter-spacing:1px;
    }
    .card5 .cacrd3_right {
      position: absolute;
      right: 120upx;
      top: 185upx;
      width: 200upx;
    }



    @media screen and (width: 320px) {
      .card5 .cacrd5_header{
        position: absolute;
        right: 221upx;
        top: 65upx;
      }
      .card5 .imgheader{
        width:94upx;
        height:94upx;
        border-radius:5px;
      }

      .card5 .cacrd3_telemail{
        position: absolute;
        right: 115upx;
        bottom: 54upx;
      }
    }

    @media screen and (min-width: 375px) {
      .card5 .cacrd5_header{
        position: absolute;
        right: 221upx;
        top: 65upx;
      }
      .card5 .imgheader{
        width:94upx;
        height:94upx;
        border-radius:5px;
      }

      .card5 .cacrd3_telemail{
        position: absolute;
        right: 115upx;
        bottom: 54upx;
      }
    }

    @media screen and (min-width: 414px) {
      .card5 .cacrd5_header{
        position: absolute;
        right: 224upx;
        top: 65upx;
      }
      .card5 .imgheader{
        width:94upx;
        height:88upx;
        border-radius:5px;
      }
      .card5 .cacrd3_telemail{
        position: absolute;
        right: 120upx;
        bottom: 55upx;
      }

    }




</style>
